<template>
  <div>
    <div class="small-title">用户名</div>
    <a-input
      v-model="dataForm.userName"
      :suffix="`${dataForm.userName.length || 0}/10`"
      :maxLength="10"
      style="width: 100%"
      placeholder="请输入"
    />
    <div class="small-title">手机号</div>
    <a-input v-model="dataForm.userAccount" style="width: 100%" placeholder="请输入" />
    <div class="small-title">邮箱</div>
    <a-input v-model="dataForm.email" style="width: 100%" placeholder="请输入" />
    <div class="small-title">用户等级</div>
    <a-select placeholder="请选择" v-model="dataForm.roleId" style="width: 100%">
      <a-select-option :value="item.id" v-for="item in roleList" :key="item.id"> {{ item.roleName }} </a-select-option>
    </a-select>
    <a-divider></a-divider>
    <div class="mybtn">
      <a-button class="cancel" @click="cancel">取消</a-button>
      <a-button type="primary" @click="handleSumbit"> 确认 </a-button>
    </div>
  </div>
</template>

<script>
import { getRole, addUser, editUser } from '@/api/user.js';
import { isPhone, isEmail, isCode } from '@/utils/validate';

export default {
  props: {
    defaultInfo: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataForm: {
        userName: '',
        userAccount: '',
        email: '',
        roleId: undefined
      },
      roleList: []
    };
  },
  watch: {
    defaultInfo(nl) {
      this.dataForm = JSON.parse(JSON.stringify(nl));
    },
    visible() {
      this.dataForm = JSON.parse(JSON.stringify(this.defaultInfo));
    }
  },

  mounted() {
    this.dataForm = JSON.parse(JSON.stringify(this.defaultInfo));
    this.getRole();
  },
  methods: {
    getRole() {
      getRole().then(res => {
        this.roleList = res.data;
      });
    },
    cancel() {
      this.$emit('cancel');
    },
    resetFields() {
      this.dataForm = {
        userName: '',
        userAccount: '',
        email: '',
        roleId: undefined
      };
    },
    handleSumbit() {
      if (!isPhone(this.dataForm.userAccount)) {
        this.$message.error('手机号码有误，请重新填写');
        return;
      }
      if (this.dataForm.email && !isEmail(this.dataForm.email)) {
        this.$message.error('邮箱有误，请重新填写');
        return;
      }

      if (this.dataForm.id) {
        // 修改
        const { id, userName, userAccount, email, roleId } = this.dataForm;
        const params = {
          id,
          userName,
          userAccount,
          email,
          roleId
        };
        editUser(params).then(res => {
          if (res.code == 0) {
            this.$message.success('修改成功');
            this.$emit('cancel', true);
          }
        });
      } else {
        // 新增
        addUser(this.dataForm).then(res => {
          if (res.code == 0) {
            this.$message.success('新增成功');
            this.$emit('cancel', true);
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ant-radio-wrapper {
  color: #fff;
  margin-right: 100px;
}
.text-box {
  width: 40%;
  height: 48px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(22, 102, 240, 0.2);
}
.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 24px;
}
.small-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 4px;
  margin-top: 16px;
}
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  img {
    width: 32px;
    height: 32px;
  }
}
.img-box {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .one-img {
    width: 70px;
    height: 70px;
  }
  .jiantou {
    width: 32px;
    height: 32px;
  }
}
.textarea {
  margin-top: 16px;
}
.mybtn {
  display: flex;
  justify-content: center;
  align-items: center;
  .cancel {
    margin-right: 20px;
    color: #fff;
    background: rgba(22, 102, 240, 0.2);
    border-color: rgba(22, 102, 240, 0.2);
  }
}
</style>
